<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>过渡效果</title>

        <style type="text/css">

            body { text-align: center ; height: 2000px ; }

            .wrapper {
                 width: 200px ; 
                 height: 200px ; 
                 background: #dedede ; 
                 margin: 25px auto ; 
                 border: 1px solid blue ; 
            }

            .first { 
               transition: width 3s linear 3s ;
            }
            .first:hover {  width: 800px ;  }

            .second { 
                transition: width 3s ease ; /* 第四个值采用默认值 */
            }
            .second:hover {  width: 800px ;  }

            .third {  
                transition: width 3s ; /* 第三个和第四个值采用默认值 */
            }
            .third:hover {  width: 800px ;  }

            .fourth { width: 300px; height: 0px; overflow: hidden ;transition: height 3s; }
            .fourth:hover { height: 300px ; }
            [type=button]:hover+div { height: 300px ; }

        </style>

    </head>
    <body>

        <div class="wrapper first"></div>

        <div class="wrapper second"></div>

        <div class="wrapper third"></div>

        <button type="button">鼠标悬浮到这里来试试</button>
        <div class="wrapper fourth">
            <img src="liuyifei.jpg" >
        </div>
        
    </body>
</html>